<template>
  <div class="home_first">
    <slideshow id="slideBlock"></slideshow>

    <div class="special_subject" id="homeSpecialSubject">
      <div class="subject_title">专题</div>
      <div class="subject_content">
        <div class="subject_item" @click="openPage('openNew')">
          <el-icon :size="subjectIconSize"><Coin /></el-icon>
          新品
        </div>
        <div class="subject_item" @click="openPage('openPromotion')">
          <el-icon :size="subjectIconSize"><Coin /></el-icon>
          低价
        </div>
        <div class="subject_item" @click="openPage('openSecKill')">
          <el-icon :size="subjectIconSize"><Coin /></el-icon>
          秒杀
        </div>
        <div class="subject_item" @click="openPage('openMaxOut')">
          <el-icon :size="subjectIconSize"><Coin /></el-icon>
          高销
        </div>
      </div>
    </div>

    <div id="maybeLike"></div>
    <productList :listTitle="'猜你喜欢'" :getData="listProductLike" :bottomEsOrNot="false" />

    <div id="totalPro"></div>
    <productList :listTitle="'全部'" :getData="listProductSearch" />

    <promotion-pro-list v-if="openPromotion" v-model:openPromotion="openPromotion" />

    <new-pro-list v-if="openNew" v-model:openNew="openNew" />

    <max-out-pro-list v-if="openMaxOut" v-model:openMaxOut="openMaxOut" />

    <secKillList v-if="openSecKill" v-model:openSecKill="openSecKill" />

  </div>
</template>

<script setup>
import {ref} from 'vue'
import slideshow from '@/components/home/slideshow.vue'
import { Coin } from "@element-plus/icons-vue";
import productList from "@/components/product/productList.vue";
import secKillList from "@/components/activity/secKill/secKillList.vue";
import PromotionProList from "@/components/activity/promotionPro/promotionProList.vue";
import NewProList from "@/components/activity/newPro/newProList.vue";
import MaxOutProList from "@/components/activity/maxOutPro/maxOutProList.vue";
import {listProductSearch, listProductLike} from "@/apis/product.js";

const subjectIconSize = ref(30)

// 判断
const openSecKill = ref(false)
const openPromotion = ref(false)
const openNew = ref(false)
const openMaxOut = ref(false)

const openPage = (str) => {
  switch (str){
    case 'openSecKill': openSecKill.value = true;break;
    case 'openPromotion': openPromotion.value = true;break;
    case 'openNew': openNew.value = true;break;
    case 'openMaxOut': openMaxOut.value = true;break;
  }
}

</script>

<style scoped>
.home_first{
  height: 100%;
  width: 100%;
}

.special_subject{
  height: 50vh;
  width: 100%;
  transition: all 0.2s ease-in-out;
  margin: 1vh 0 2vh 0;
  cursor: pointer;
  background-color: #fcfcfc;
}

.subject_title{
  height: 10vh;
  width: 100%;
  font-size: 26px;
  font-family: "Inter", sans-serif;
  padding: 0 2vh 0 2.5vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.subject_content{
  height: 40vh;
  width: 100%;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  margin: 0;
  padding: 1vh 0 1vh 0;
}
.subject_item{
  height: 100%;
  width: 24.5%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  font-size: 18px;
  transition: all 0.3s ease-in-out;
  background-color: #fcfcfc;
  border-radius: 4px;
}
.subject_item:hover{
  transform: scale(1.1);
}

</style>
